<template>
  <div class="class">
    <head-view>
      <span slot="center">分类</span>
      <span slot="right"><i class="el-icon-search"></i></span>
    </head-view>
    <el-row>
      <el-col :span="7">
        <div class="class-nav">
          <router-link to="/class/dianqi"><span>家用电器</span></router-link>
          <router-link to="/class/phone"><span>手机通讯</span></router-link>
          <router-link to="/class/office"><span>电脑办公</span></router-link>
          <router-link to="/class/cloth"><span>家具家居</span></router-link>
          <router-link to="/class/jiaju"><span>出行服饰</span></router-link>
        </div>
      </el-col>
      <el-col :span="17"><router-view></router-view></el-col>
    </el-row>
    <!-- 侧边导航 -->
    <nav-view></nav-view>
  </div>
</template>
<script>
import HeadView from "@/components/HeadView.vue";
import NavView from "../components/NavView.vue";

export default {
  components: { NavView, HeadView },
};
</script>
<style lang="scss" scoped>
.class {
  height: 100%;
}
.class-nav {
  margin-top: 10px;
  width: 100px;
  display: flex;
  flex-direction: column;
  a {
    width: 100px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    text-decoration: none;
    background: #f7f8f9;

    &.router-link-active {
      background: #fff;
      color: #000;
      span {
        padding: 0 12px;
        border-left: 4px solid red;
      }
    }
  }
}
</style>
